<template>
	<transition name="el-zoom-in-center">
		<div class="jsbos-preview-main org-form">
			<div class="jsbos-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id
					? $t(`Organize.addCompany`)
					: $t(`Organize.editCompany`)
					" />
				<div class="options">
					<el-button type="primary" :loading="btnLoading" @click="handleConfirm()">
						{{ $t("common.confirmButton") }}
					</el-button>
					<el-button @click="goBack">{{ $t("common.cancelButton") }}</el-button>
				</div>
			</div>
			<div class="main" v-loading="formLoading">
				<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px">
					<div class="jsbos-common-title mb-20">
						<h2 class="bold">基础信息</h2>
					</div>
					<el-row :gutter="20" class="custom-row">
						<el-col :sm="12" :xs="24">
							<el-form-item label="上级公司" prop="parentId">
								<JsbosTreeSelect v-model="dataForm.parentId" :options="treeData" placeholder="选择上级公司"
									style="width: 100%" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司名称" prop="fullName">
								<el-input v-model="dataForm.fullName" placeholder="输入名称" maxlength="50" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司编码" prop="enCode">
								<el-input v-model="dataForm.enCode" placeholder="输入公司编码" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司简称" prop="propertyJson.shortName">
								<el-input v-model="dataForm.shortName" placeholder="输入公司简称" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司性质" prop="propertyJson.enterpriseNature">
								<JsbosTreeSelect v-model="dataForm.propertyJson.enterpriseNature" :options="natureData"
									placeholder="请选择公司性质" style="width: 100%" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="所属行业" prop="propertyJson.industry">
								<JsbosTreeSelect v-model="dataForm.propertyJson.industry" :options="industryData" placeholder="请选择所属行业"
									style="width: 100%" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="成立时间" prop="propertyJson.foundedTime">
								<el-date-picker v-model="dataForm.propertyJson.foundedTime" type="date" value-format="timestamp"
									placeholder="选择日期" :picker-options="pickerOptions" style="width: 100%">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司电话" prop="propertyJson.telePhone">
								<el-input v-model="dataForm.propertyJson.telePhone" placeholder="输入公司电话" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司传真" prop="propertyJson.fax">
								<el-input v-model="dataForm.propertyJson.fax" placeholder="输入公司传真" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司主页" prop="propertyJson.webSite">
								<el-input v-model="dataForm.propertyJson.webSite" placeholder="输入公司主页" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="公司地址" prop="propertyJson.address">
								<el-input v-model="dataForm.propertyJson.address" placeholder="输入公司地址" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="排序" prop="sortCode">
								<el-input-number :min="0" :max="999999" v-model="dataForm.sortCode" controls-position="right" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="说明" prop="description">
								<el-input v-model="dataForm.description" type="textarea" :rows="3" />
							</el-form-item>
						</el-col>
					</el-row>
					<div class="jsbos-common-title mb-20">
						<h2 class="bold">经营信息</h2>
					</div>
					<el-row :gutter="20" class="custom-row">
						<el-col :sm="12" :xs="24">
							<el-form-item label="公司法人" prop="propertyJson.managerName">
								<el-input v-model="dataForm.propertyJson.managerName" placeholder="输入公司法人" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="联系电话" prop="propertyJson.managerTelePhone">
								<el-input v-model="dataForm.propertyJson.managerTelePhone" placeholder="输入联系电话" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="联系手机" prop="propertyJson.managerMobilePhone">
								<el-input v-model="dataForm.propertyJson.managerMobilePhone" placeholder="输入联系手机" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="联系邮箱" prop="propertyJson.manageEmail">
								<el-input v-model="dataForm.propertyJson.manageEmail" placeholder="输入联系邮箱" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="开户银行" prop="propertyJson.bankName">
								<el-input v-model="dataForm.propertyJson.bankName" placeholder="输入开户银行" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="银行账户" prop="propertyJson.bankAccount">
								<el-input v-model="dataForm.propertyJson.bankAccount" placeholder="输入银行账户" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="经营范围" prop="propertyJson.businessscope">
								<el-input v-model="dataForm.propertyJson.businessscope" type="textarea" :rows="3" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
	</transition>
</template>

<script>
import {
	getOrganizeSelector,
	createOrganize,
	updateOrganize,
	getOrganizeInfo,
} from "@/api/permission/organize";

export default {
	data() {
		return {
			visible: false,
			btnLoading: false,
			formLoading: false,
			dataForm: {
				id: "",
				parentId: "",
				fullName: "",
				enCode: "",
				enabledMark: 1,
				sortCode: 0,
				description: "",
				shortName: "",
				propertyJson: {
					shortName: "",
					enterpriseNature: "",
					industry: "",
					foundedTime: "",
					telePhone: "",
					fax: "",
					webSite: "",
					address: "",
					managerName: "",
					managerTelePhone: "",
					managerMobilePhone: "",
					manageEmail: "",
					bankName: "",
					bankAccount: "",
					businessscope: "",
				},
			},
			treeData: [],
			natureData: [],
			industryData: [],
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
			},
			dataRule: {
				parentId: [{
					required: true,
					message: "上级公司不能为空",
					trigger: "input"
				},],
				fullName: [{
					required: true,
					message: "请输入公司名称",
					trigger: "blur"
				},],
				enCode: [{
					required: true,
					message: "请输入公司编码",
					trigger: "blur"
				},
				// { validator: this.formValidate('enCode', '公司编码只能输入英文、数字和小数点且小数点不能放在首尾'), trigger: 'blur' },
				{
					max: 50,
					message: "公司编码最多为50个字符！",
					trigger: "blur"
				},
				],
			},
		};
	},
	methods: {
		init(id) {
			this.visible = true;
			this.dataForm.id = id || "";
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields();
				// 获取公司下拉列表
				getOrganizeSelector(id || 0).then((res) => {
					if (res.data.list && res.data.list.length) {
						this.treeData = res.data.list;
					} else {
						let topItem = {
							fullName: "顶级节点",
							hasChildren: true,
							id: "-1",
							icon: "icon-ym icon-ym-tree-organization3",
							children: res.data.list,
						};
						this.treeData = [topItem];
					}
				});

				// 获取公司性质
				this.$store
					.dispatch("base/getDictionaryData", {
						encode: "EnterpriseNature"
					})
					.then((res) => {
						this.natureData = res;
					});

				// 获取所属行业
				this.$store
					.dispatch("base/getDictionaryData", {
						encode: "IndustryTypeNo"
					})
					.then((res) => {
						this.industryData = res;
					});

				if (this.dataForm.id) {
					this.formLoading = true;
					getOrganizeInfo(this.dataForm.id)
						.then((res) => {
							this.dataForm = res.data;
							const propertyJson = JSON.parse(res.data.propertyJson);
							this.dataForm.propertyJson = propertyJson;
							if (propertyJson == null) {
								// this.dataForm.propertyJson.enterpriseNature = null;
								// this.dataForm.propertyJson.shortName = null;
								// this.dataForm.propertyJson.industry = null;
								this.dataForm.propertyJson = {};
							}
							this.formLoading = false;
						})
						.catch(() => {
							this.formLoading = false;
						});
				}
			});
		},
		goBack() {
			this.dataForm.shortName = ""
			this.$emit("close");
		},
		handleConfirm() {
			this.$refs["dataForm"].validate((valid) => {
				if (valid) {
					this.btnLoading = true;
					const formMethod = this.dataForm.id ? updateOrganize : createOrganize;
					formMethod(this.dataForm)
						.then((res) => {
							this.$message({
								message: res.msg,
								type: "success",
								duration: 1500,
								onClose: () => {
									this.visible = false;
									this.btnLoading = false;
									this.$store.commit("generator/SET_COMPANY_TREE", []);
									this.$store.commit("generator/SET_DEP_TREE", []);
									this.$emit("close", true);
								},
							});
						})
						.catch(() => {
							this.btnLoading = false;
						});
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.main {
	padding: 10px 30px 0;
}
</style>
